<template>
  <div class="danye">
    <!-- 搜索框 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="mar-top">
      <el-button
        style="margin-right: 1rem"
        type="primary"
        @click="showAddDialog"
        >添加酒品</el-button
      >
      <el-input
        v-model="searchName"
        placeholder="按酒名搜索"
        style="width: 200px; margin-bottom: 10px; margin-right: 1rem"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch('name')"
        ></el-button>
      </el-input>
      <el-input
        v-model="searchUsername"
        placeholder="按用户名搜索"
        style="width: 200px; margin-bottom: 10px"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch('username')"
        ></el-button>
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table border :data="records" style="width: 100%" stripe>
      <!-- 表头定义 -->
      <el-table-column prop="w_name" label="酒名"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column
        prop="reservation_date"
        label="预约日期"
      ></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column
        prop="alcohol_content"
        label="酒精含量"
      ></el-table-column>
      <el-table-column prop="image_url" label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.image_url"
            :preview-src-list="[scope.row.image_url]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="origin" label="产地"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="stock_quantity" label="库存"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="vintage_year" label="年份"></el-table-column>
      <el-table-column
        prop="reservation_id"
        label="分类ID"
        style="display: none"
      ></el-table-column>
      <el-table-column
        prop="status"
        fixed="right"
        label="状态"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status === '待付款'" type="text" size="small">
            <span  v-if="scope.row.status === '待付款'">发货</span>
            <span
              @click="ship(scope.row)"
              v-else-if="scope.row.status === '已支付'"
              >发货</span
            >
            <span
              @click="confirmReceipt(scope.row)"
              v-else-if="
                scope.row.status === '待收货' || scope.row.status === '已收货'
              "
              >确认收货</span
            >
            <!-- <span v-else-if="scope.row.status === '待评价'">评论</span> -->
            <span v-else></span>
          </el-button>
          <!-- 修改按钮 -->
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <!-- 删除按钮 -->
          <el-button type="text" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
    <WDialog :mode="mode" ref="Dialog"></WDialog>
  </div>
</template>

<script>
import {
  reservationAll,
  ship,
  deleteid,
  confirmPayment,
  confirmReceipt,
} from "@/api/logoder";
import WDialog from "@/views/account/dialog.vue";
import { Message } from "element-ui";
export default {
  components: {
    WDialog,
  },
  data() {
    return {
      records: [], // 表格数据
      size: 10,
      current: 1,
      total: 1,
      mode: "",
      searchName: "", // 搜索姓名
      searchUsername: "", // 搜索用户名
      rules: {
        w_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        // 其他表单项...
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handleSearch(val) {
      if (val === "name") {
        this.loadData(this.searchName, null);
      } else if (val === "username") {
        this.loadData(null, this.searchUsername);
      }
    },
    //确认收货
    async confirmReceipt(val) {
      const res = await confirmReceipt(val.id);
      if (res.code == 200) {
        Message(res.message);
        // 假设有一个 dataId 是当前确认支付的项的 reservation_id
        const updatedReservationId = val.id; // 你需要替换为实际的 reservation_id

        // 更新前端数据
        const index = this.records.findIndex(
          (item) => item.id === updatedReservationId
        );
        if (index !== -1) {
          // 假设确认支付后的状态为 '已支付'，你需要替换为实际的状态
          this.$set(this.records, index, {
            ...this.records[index],
            status: "待评价",
          });
        }
      } else {
        Message(res.message);
      }
    },
    //确认发货
    async confirmPayment(val) {
      const res = await confirmPayment(val.id);
      if (res.code == 200) {
        Message(res.message);
        // 假设有一个 dataId 是当前确认支付的项的 reservation_id
        const updatedReservationId = val.id; // 你需要替换为实际的 reservation_id

        // 更新前端数据
        const index = this.records.findIndex(
          (item) => item.id === updatedReservationId
        );
        if (index !== -1) {
          // 假设确认支付后的状态为 '已支付'，你需要替换为实际的状态
          this.$set(this.records, index, {
            ...this.records[index],
            status: "待发货",
          });
        }
      } else {
        Message(res.message);
      }
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
    },
    handleSizeChange(val) {
      console.log(val);
      this.size = val;
      this.loadData();
    },
    // 处理修改操作
    handleEdit(row) {
      // 打开对话框，并将当前行数据填充到表单中
      this.mode = "edit";
      this.$refs.Dialog.form = { ...row };
      this.$refs.Dialog.dialogVisible = true;
    },
    async ship(val) {
      const res = await ship(val.id);
      if (res.code == 200) {
        Message(res.message);
        // 假设有一个 dataId 是当前确认支付的项的 reservation_id
        const updatedReservationId = val.id; // 你需要替换为实际的 reservation_id

        // 更新前端数据
        const index = this.records.findIndex(
          (item) => item.id === updatedReservationId
        );
        if (index !== -1) {
          // 假设确认支付后的状态为 '已支付'，你需要替换为实际的状态
          this.$set(this.records, index, {
            ...this.records[index],
            status: "待收货",
          });
        }
      } else {
        Message(res.message);
      }
    },
    async loadData(name, username) {
      const param = {
        size: this.size,
        current: this.current,
      };
      const res = await reservationAll(param, name, username);
      if (res.code == 200) {
        this.records = res.data.list.records;
        this.size = res.data.list.size;
        this.current = res.data.list.current;
        this.total = res.data.list.total;
      }
    },
    // 处理删除操作
    async handleDelete(row) {
      // 实现删除逻辑，根据需求发送请求等
      const res = await deleteid(row.reservation_id);
      if (res.code == 200) {
        Message(res.message);
        this.loadData();
      } else {
        Message(res.message);
      }
    },

    showAddDialog() {
      this.mode = "add";
      this.$refs.Dialog.form = [];
      this.$refs.Dialog.dialogVisible = true;
    },
  },
};
</script>
